<template>
  <base-panel-md class="home-stats-by-env" title="环境安全报警总览">
    <v-chart class="pie1" :options="option1" />
    <v-chart class="pie2" :options="option2" />
    <v-chart class="pie3" :options="option3" />
    <template #right-btn>
      <div class="btns">
        <base-btn @click="active = 0" :active="active === 0" class="more">正常</base-btn>
        <base-btn @click="active = 1" :active="active === 1" class="time">时间</base-btn>
        <base-btn @click="active = 2" :active="active === 2" class="area">区域</base-btn>
      </div>
    </template>
  </base-panel-md>
</template>

<script>
import BasePanelMd from './BasePanelMd.vue';
import BaseBtn from './BaseBtn.vue';

const value = 85.23;
const values = 55.33;

const val = value.toFixed(2).split('.')[0];
const vals = value.toFixed(2).split('.')[1];

const integer = values.toFixed(2).split('.')[0];
const decimals = values.toFixed(2).split('.')[1];

export default {
  components: {
    BasePanelMd,
    BaseBtn,
  },

  data() {
    return {
      active: 1,
      option1: {
        title: [
          {
            text: '烟感',
            left: '35%',
            top: '79%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(15),
            },
          },
          {
            text: '1789',
            left: '30%',
            top: 'center',
            textStyle: { color: '#fff', fontSize: this.calcSize(16), fontStyle: 'italic' },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '63%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 1,
            // top: '-20%',
            label: {
              position: 'center',
            },
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#8be75b', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#44e073', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#262e5b',
                  },
                },
              },
            ],
          },
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            zlevel: 0,
            // top: '-20%',
            label: {
              normal: {
                position: 'center',
              },
            },
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#99e856', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#41e074', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#061740',
                  },
                },
              },
            ],
          },
        ],
      },
      option2: {
        title: [
          // {
          //   text: `{a|${value}}{c|%}`,
          //   x: 'center',
          //   y: 'center',
          //   textStyle: {
          //     rich: {
          //       a: {
          //         fontSize: this.calcSize(18),
          //         color: '#29EEF3',
          //       },
          //       c: {
          //         fontSize: this.calcSize(18),
          //         color: '#ffffff',
          //       // padding: [5,0]
          //       },
          //     },
          //   },
          // },
          {
            text: `${val}`,
            x: '26%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(18),
              color: '#29EEF3',
            },
          },
          {
            text: `.${vals}%`,
            x: '40%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(16),
              color: '#29EEF3',
            },
          },
          {
            text: 'CO',
            left: '37%',
            top: '79%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(13),
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            // center: ['50%', '39%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            label: false,
            data: [
              {
                value,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#4FADFD', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#28E8FA', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#173164',
                  },
                },
              },
            ],
          },

          {
            type: 'gauge',
            radius: '73%',
            // center: ['50%', '39%'],
            startAngle: 270,
            endAngle: -30,
            splitNumber: 7,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 1,
                color: '#293b68',
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            // data: [
            //   {
            //     value: 0,
            //     name: '',
            //   },
            // ],
          },
        ],
      },
      option3: {
        title: [
          // {
          //   text: `{a|${values}}{c|%}`,
          //   x: 'center',
          //   y: 'center',
          //   textStyle: {
          //     rich: {
          //       a: {
          //         fontSize: this.calcSize(18),
          //         color: '#29EEF3',
          //       },
          //       c: {
          //         fontSize: this.calcSize(18),
          //         color: '#ffffff',
          //       // padding: [5,0]
          //       },
          //     },
          //   },
          // },
          {
            text: `${integer}`,
            x: '26%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(18),
              color: '#29EEF3',
            },
          },
          {
            text: `.${decimals}%`,
            x: '40%',
            y: 'center',
            textStyle: {
              fontSize: this.calcSize(16),
              color: '#29EEF3',
            },
          },
          {
            text: '硫化氢',
            left: '32%',
            top: '79%',
            textStyle: {
              color: '#fff',
              fontSize: this.calcSize(13),
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            // center: ['50%', '39%'],
            silent: true,
            clockwise: true,
            startAngle: 270,
            z: 0,
            label: false,
            data: [
              {
                value: values,
                name: '',
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#4FADFD', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#28E8FA', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - values,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#173164',
                  },
                },
              },
            ],
          },

          {
            type: 'gauge',
            radius: '73%',
            // center: ['50%', '39%'],
            startAngle: 270,
            endAngle: -30,
            splitNumber: 7,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 1,
                color: '#293b68',
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
          },
        ],
      },
    };
  },

  methods: {
    calcSize(num) {
      return (document.documentElement.clientWidth / 1920) * num;
    },
  },
};
</script>

<style lang="scss" scoped>
.home-stats-by-env {
  height: 25.278vh;
}

.more {
  color: #4de6e8;
}

.area {
  margin-left: 1vw;
}

.time {
  margin-left: 1vw;
}

.pie1 {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.pie2 {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  position: absolute;
  left: 33.3%;
  bottom: 0;
}

.pie3 {
  display: inline-block;
  width: 33.3%;
  height: 100%;
  position: absolute;
  left: 66.6%;
  bottom: 0;
}
</style>
